import { InfoCircleOutlined } from '@ant-design/icons';
import { Col, Row, Tooltip } from 'antd';
import { ChartCard } from './Charts';

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: { marginBottom: 24 },
};

export type DashboardFormProps = {
  data: Partial<API.DashboardItem>;
};

const IntroduceRow: React.FC<DashboardFormProps> = (props) => (
  <Row gutter={24}>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title="Leader"
        action={
          <Tooltip title="指标说明">
            <InfoCircleOutlined />
          </Tooltip>
        }
        total={props.data.leader}
        // footer={<Field label="日访问量" value={numeral(1234).format('0,0')} />}
        contentHeight={10}
      />
    </Col>

    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title="Total Jobs"
        action={
          <Tooltip title="指标说明">
            <InfoCircleOutlined />
          </Tooltip>
        }
        total={props.data.total_count}
        // footer={<Field label="日访问量" value={numeral(1234).format('0,0')} />}
        contentHeight={46}
      />
    </Col>

    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title="Success Jobs"
        action={
          <Tooltip title="指标说明">
            <InfoCircleOutlined />
          </Tooltip>
        }
        total={props.data.success_count}
        // footer={<Field label="日访问量" value={numeral(1234).format('0,0')} />}
        contentHeight={46}
      />
    </Col>

    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title="Failure Jobs"
        action={
          <Tooltip title="指标说明">
            <InfoCircleOutlined />
          </Tooltip>
        }
        total={props.data.error_count}
        // footer={<Field label="日访问量" value={numeral(1234).format('0,0')} />}
        contentHeight={46}
      />
    </Col>
  </Row>
);

export default IntroduceRow;
